<template>
    <div>
         <!-- 导航区域 -->
         <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
           <el-breadcrumb-item>商品管理</el-breadcrumb-item>
           <el-breadcrumb-item>添加商品</el-breadcrumb-item>
         </el-breadcrumb>

        

        <!-- 卡片视图 -->
         <el-card>
            <div id = "main" style="width:900px; height:400px">

            </div>
         </el-card>
    </div>
</template>


<script>
import _ from 'lodash'
export default {
    data() {
      return {
        options: {
        title: {
        text: '用户来源'
        },
        tooltip: {
        trigger: 'axis',
        axisPointer: {
        type: 'cross',
        label: {
        backgroundColor: '#E9EEF3'
        }
        }
        },
        grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
        },
        xAxis: [
        {
        boundaryGap: false
        }
        ],
        yAxis: [
        {
        type: 'value'
        }
        ]
        }
      }
      },


      created() {

      },


     async mounted(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('main'));


          const {data: res}= await this.$http.get('reports/type/1')

          if(res.meta.status !== 200){
              return this.$message.error('返回数据失败')
          }



          // 指定图表的配置项和数据
         const result =  _.merge(res.data, this.options)


          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(result);
      },


      methods: {

      }
    
}
</script>


<style lang="less" scoped>

</style>